<template>
    <div class="container box flex-col">
        <div class="flex-row space-between">
            <span class="page_title" style="margin: 32px;">我的工作台</span>
        </div>
        <div class="flex-row w_full" style="padding: 32px; flex-wrap: wrap;">
            <div class="flex_1" v-for="item in listWorkBench" @click="click_go_system(item)"
                 style="width: 470px;min-width: 470px;cursor: pointer; max-width: 470px; height:120px;margin-right: 32px;margin-bottom: 32px; background-color: white; border-radius: 12px;">
                <div class="flex-row-center h_full">
                    <div class="flex-row center-center" style="padding:20px; ">
                        <div class="full flex-row center-center"
                             style="height: 80px; width: 80px; border-radius: 40px;background-color: #F2F3FF">
                            <el-image style="height: 40px;width: 40px;" :src="item.IconPath"></el-image>
                        </div>
                    </div>
                    <div class="flex_1 flex-col h_full">
                        <div class="systemTitle">{{ item.ItemName }}</div>
                        <div class="systemInfoTitle flex_1" style="white-space: normal">{{ item.SubItemName }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { useRoute } from "vue-router";
    import { WorkBenchItem } from "@/type/workBenchItem";
    import router from "@/router";
    import { onMounted } from "vue";
    import { api_pageTrainUser } from "@/request/apis/trainApi";
    import { api_addDataBank } from "../request/apis/dataBankApi";

    const route = useRoute();
    const _examId = route.query.examId as string;
    console.log('route', _examId);

    const listWorkBench: Array<WorkBenchItem> = [
        {
            ItemName: '人员管理系统',
            SubItemName: '这是一段功能介绍文字这是一段功能介绍文字 这是一段功能介绍文字这是一段功能介绍',
            IconPath: require('@/assets/userManager.png'),
            index: 0
        }, {
            ItemName: '问卷调研系统',
            SubItemName: '这是一段功能介绍文字这是一段功能介绍文字 这是一段功能介绍文字这是一段功能介绍',
            IconPath: require('@/assets/naireSystem.png'),
            index: 1
        },
        {
            ItemName: '培训管理系统',
            SubItemName: '这是一段功能介绍文字这是一段功能介绍文字 这是一段功能介绍文字这是一段功能介绍',
            IconPath: require('@/assets/leanring.png'),
            index: 2
        },
        {
            ItemName: '考试中心',
            SubItemName: '这是一段功能介绍文字这是一段功能介绍文字 这是一段功能介绍文字这是一段功能介绍',
            IconPath: require('@/assets/test.png'),
            index: 3
        },
    ];

    onMounted(async () => {
        await search_pri();
    })

    const search_pri = async () => {
        const limit = 10;
        const page = 1;
        const r = await api_pageTrainUser('12',
            page,
            limit);
    }
    const click_go_system = (item: WorkBenchItem) => {
        switch (item.index) {
            case 0:
                router.push('/user');
                break;
            case 1:
                router.push('/naire');
                break;
            case 2:
                router.push('/train');
                break;
            case 3:
                router.push('/exam');
                break;
        }

    }

</script>

<style scoped>
    .box {
        background-image: url("../assets/workBench_bg.png");
        /* 背景图垂直、水平均居中 */
        background-position: center center;
        /* 背景图不平铺 */
        background-repeat: no-repeat;
        /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
        background-attachment: fixed;
        /* 让背景图基于容器大小伸缩 */
        background-size: cover;
        /* 设置背景颜色，背景图加载过程中会显示背景色 */
        background-color: #464646;
    }

    .page_title {
        font-size: 24px;
        font-weight: 600;
        color: #0A1629;
        line-height: 28px;
    }

    .systemTitle {
        font-size: 20px;
        font-weight: bolder;
        color: #0A1629;
        line-height: 23px;
        margin-top: 20px;
        padding: 0;
    }

    .systemInfoTitle {
        font-size: 16px;
        font-weight: bold;
        color: #7D8592;
        line-height: 19px;
        margin-top: 12px;
        margin-right: 12px;
    }
</style>